<template>
    <div class="addedit">
        <el-form :model="ruleForm" label-width="150px" ref="ruleFormRef" :rules="rules">
            <el-form-item label="属性名称：" prop="name" required>
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="商品类型：" prop="productAttributeCategoryId">
                <el-select v-model="ruleForm.productAttributeCategoryId" placeholder="请选择">
                    <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类筛选样式：" prop="filterType">
                <el-radio-group v-model="ruleForm.filterType">
                    <el-radio :label="0">普通</el-radio>
                    <el-radio :label="1">颜色</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="能否进行检索：" prop="searchType">
                <el-radio-group v-model="ruleForm.searchType">
                    <el-radio :label="0">不需要检索</el-radio>
                    <el-radio :label="1">关键字检索</el-radio>
                    <el-radio :label="2">范围检索</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="商品属性关联：" prop="relatedStatus">
                <el-radio-group v-model="ruleForm.relatedStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性是否可选：" prop="selectType">
                <el-radio-group v-model="ruleForm.selectType">
                    <el-radio :label="0">唯一</el-radio>
                    <el-radio :label="1">单选</el-radio>
                    <el-radio :label="2">复选</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值的录入方式：" prop="inputType">
                <el-radio-group v-model="ruleForm.inputType">
                    <el-radio :label="0">手工录入</el-radio>
                    <el-radio :label="1">从下面列表中选择</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值可选值列表：" prop="inputList">
                <el-input type="textarea" v-model="ruleForm.inputList" />
            </el-form-item>

            <el-form-item label="是否支持手动新增：" prop="handAddStatus">
                <el-radio-group v-model="ruleForm.handAddStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序属性：" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules, } from 'element-plus'
import { pro } from '@/api'
import { useTable } from '@/hooks/useTable'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
interface Istate {
    ruleForm: ICreateProductAttributeParams
}
const state = reactive<Istate>({
    ruleForm: {
        filterType: 0,
        handAddStatus: 0,
        inputList: '',
        inputType: 0,
        name: '',
        productAttributeCategoryId: 0,
        relatedStatus: 0,
        searchType: 0,
        selectType: 0,
        sort: 0,
        type: 0
    }
})

const { ruleForm } = toRefs(state)

// 请求属性分类getProAttrsApi
const { tableData } = useTable(pro.getProAttrsApi)
// 根据id获取属性
if (route.query.id) {
    pro.getIDproductAttributeApi(parseInt(route.query.id as string)).then(res => {
        state.ruleForm = res.data
    })
}

// 添加、编辑表单约束
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入属性名称', trigger: 'blur' },
    ],
})
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 如果校验通过才发请求
            ElMessageBox.confirm('是否提交数据', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                pro.updateIDProductAttributeApi({ id: parseInt(route.query.id as string), editParams: state.ruleForm }).then(res => {
                    if (res.code === 200) {
                        ElMessage.success('提交成功')
                        router.push(`/pms/productAttrList?cid=${state.ruleForm.productAttributeCategoryId}&cname=${state.ruleForm.name}&type=${state.ruleForm.type}`)
                    }
                })
            })
        } else {
            return false
        }
    })
}

</script>
<style lang="less" scoped>
.addedit {
    border: 1px solid #ebeef5;
    padding: 50px 100px;
    margin: 20px;
}
</style>